<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<form class="layui-form" action="">
		  <div class="layui-form-item">
		    <label class="layui-form-label">用户名</label>
		    <div class="layui-input-inline">
		      <input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">排序</label>
		    <div class="layui-input-inline">
		      <select name="orderBy">
		        <option value=""></option>
		        <option value="LoginName">用户名</option>
		        <option value="CreateTime">创建时间</option>
		      </select>
		    </div>
		  </div>
			<div class="layui-form-item">
			  <label class="layui-form-label">创建时间</label>
			  <div class="layui-input-inline" style="width: 200px;">
			    <input type="text" id="time_min" name="beginDate" placeholder="开始时间" autocomplete="off" class="layui-input">
			  </div>
			  <div class="layui-form-mid">-</div>
			  <div class="layui-input-inline" style="width: 200px;">
			    <input type="text" id="time_max" name="endDate" placeholder="结束时间" autocomplete="off" class="layui-input">
			  </div>
			</div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">是否锁定</label>
		    <div class="layui-input-inline">
		      <input type="radio" name="isLock" value="是" title="是">
		      <input type="radio" name="isLock" value="否" title="否" checked>
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		  </div>
		</form>
		 
		<script>
		//Demo
		layui.use(['form','table'], function(){
		  var form = layui.form;
		  var table = layui.table;
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    //layer.msg(JSON.stringify(data.field));
				console.log(data.field);
				//表格重载
				table.reload('demo', {
				  where: data.field //设定异步数据接口的额外参数
				  //,height: 300
				});
				
		    return false;
		  });
		});
		</script>
		
		<table id="demo" lay-filter="test"></table>
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
		    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
		  </div>
		</script>
		
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="detail">设置</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script>
		layui.use(['table','laydate','jquery','form','transfer'], function(){
		  var table = layui.table;
			var laydate = layui.laydate;
			var $ = layui.jquery;
			var form = layui.form;
			var transfer = layui.transfer;
			laydate.render({
			  elem: '#time_min' //指定元素
			});
			laydate.render({
			  elem: '#time_max' //指定元素
			});
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
			,toolbar: '#toolbarDemo'
		    ,height: 350
		    ,url: 'http://stuapi.ysd3g.com/api/GetUsersLayUI' //数据接口
			,method:'post'
			,limit:5//每页显示条数
			,limits:[5,10,20,30]//每页条数的选项
			,where:{
				token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
			}
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'Id', title: '用户id', width:80, sort: true, fixed: 'left'}
		      ,{field: 'LoginName', title: '用户名', }
		      ,{field: 'IsLockout', title: '是否锁定'}
		      ,{field: 'LastLoginTime', title: '最后登录时间'} 
		      ,{field: 'CreateTime', title: '创建时间',width:150}
		      ,{field: 'PsdWrongTime', title: '密码错误次数'}
		      ,{field: 'LockTime', title: '用户锁定时间'}
		      ,{field: 'ProtectEMail', title: '邮箱'}
		      ,{field: 'ProtectMTel', title: '手机号码'}
			  ,{field: 'RowNum', title: '行号'}
			  ,{fixed: 'right',title: '操作', width:200, align:'center', toolbar: '#barDemo'}
		    ]]
		  });
		  //监听事件——头部工具栏
		  table.on('toolbar(test)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'add':
		        layer.msg('添加');
		      break;
		      case 'delete':
		        layer.msg('删除');
		      break;
		      case 'update':
		        layer.msg('编辑');
		      break;
		    };
		  });
		  //监听工具条
		  table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		    var data = obj.data; //获得当前行数据
		    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    var tr = obj.tr; //获得当前行 tr 的DOM对象
		   
		    if(layEvent === 'detail'){ //设置
		      //do somehing
					
					//获取当前用户已拥有角色
					$.post(
						'http://stuapi.ysd3g.com/api/GetRolesByUserIdLayUI',
						{
							uId:data.Id,
							token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
						},function(right){
							var a = new Array();
							var arr = right.data;
							for(var i=0;i<arr.length;i++){
								a.push(arr[i].Id);
							}
							//获取系统所有角色
							$.post(
								'http://stuapi.ysd3g.com/api/GetRolesAll',
								{
									token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
								},function(left){
									//渲染
									transfer.render({
									  elem: '#test1'  //绑定元素
									  ,data: left	//左侧栏数据
										,value:	a	//右侧栏数据
									  ,id: 'demo1' //定义索引
										,title:['系统所有角色','用户已有角色']
										,onchange:function(role,index){
											if(index==0){//左往右,给用户设置角色
												for(var i=0;i<role.length;i++){
													$.post(
														'http://stuapi.ysd3g.com/api/AddUserToRole',
														{
															uId:data.Id,
															rId:role[i].value,
															token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
														},function(res){
															layer.msg(''+res.success);
														},'json'
													);
												}
											}else{//右往左,移除用户已有角色
												for(var i=0;i<role.length;i++){
													$.post(
														'http://stuapi.ysd3g.com/api/RemoveUserFromRole',
														{
															uId:data.Id,
															rId:role[i].value,
															token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
														},function(res){
															layer.msg(''+res.success);
														},'json'
													);
												}
											}
										}
										,parseData: function(res){
										    return {
										      "value": res.Id //数据值
										      ,"title": res.Name //数据标题
										    }
										  }
									});
								},'json'
							);
						},'json'
					);
					
					layer.open({
					  type: 1,
						area: ['600px', '500px'],
						title:'正在为<font color="red">['+data.LoginName+']</font>设置角色',
					  content: $('#test1') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
					
		    } else if(layEvent === 'del'){ //删除
		      layer.confirm('真的删除行么', function(index){
		        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
		        layer.close(index);
		        //向服务端发送删除指令
						$.post(
							'http://stuapi.ysd3g.com/api/DeleteUser',
							{
								uid:data.Id,
								token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
							},function(res){
								layer.msg(''+res);
							},'json'
						);
		      });
		    } else if(layEvent === 'edit'){ //编辑
		      //do something
					//初始化赋值表单
					form.val("ff", {
					  "loginName": data.LoginName // "name": "value"
					  ,"email": data.ProtectEMail
					  ,"mtel": data.ProtectMTel
					});
		      layer.open({
		        type: 1,
						area: ['400px', '300px'],
						title:'编辑用户',
		        content: $('#ff') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		      });
		      //同步更新缓存对应的值
		      obj.update({
		        username: '123'
		        ,title: 'xxx'
		      });
		    }
		  });
		  
		  
		});
		</script>
	</body>
	
	<form id="ff" class="layui-form" lay-filter="ff" action="" style="display: none;">
		<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
	  <div class="layui-form-item">
	    <label class="layui-form-label">用户名</label>
	    <div class="layui-input-inline">
	      <input type="text" name="loginName" readonly="readonly" placeholder="请输入用户名" autocomplete="off" class="layui-input">
	    </div>
	  </div>
		<div class="layui-form-item">
		  <label class="layui-form-label">邮箱</label>
		  <div class="layui-input-inline">
		    <input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
		  </div>
		</div>
		<div class="layui-form-item">
		  <label class="layui-form-label">手机号</label>
		  <div class="layui-input-inline">
		    <input type="text" name="mtel" placeholder="请输入手机号" autocomplete="off" class="layui-input">
		  </div>
		</div>
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>
	<script>
	//Demo
	layui.use(['form','jquery'], function(){
	  var form = layui.form;
		var $ = layui.jquery;
	  //监听提交
	  form.on('submit(edit)', function(data){
	    //layer.msg(JSON.stringify(data.field));
		  $.post(
				'http://stuapi.ysd3g.com/api/UpdateUser',
				data.field,
				function(res){
					layer.msg(''+res.success);
					location.reload();//刷新页面
				},'json'
			);
	    return false;
	  });
	});
	</script>
	
	<div id="test1" style="display: none;"></div>
	  <script>
	  layui.use('transfer', function(){
	    var transfer = layui.transfer;
	   
	    
	  });
	  </script>
</html>
